/* eslint-disable max-len */
<template>
  <div class="show-msg">
    <div>
      <div
        v-for="(item, index) in msgData"
        @click="$emit('message-click', item)"
        :key="index"
        :class="`show-msg-item ${index ? 'liner-before' : ''}`"
      >
        <div class="msg-nums">{{ item.total || 0 }}</div>
        <div class="msg-label">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
/*eslint-disable*/
export default {
  props: {
    msgData: {
      type: Array,

      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="less" scoped>
.show-msg {
  padding: 10px;
  > div {
    background-color: #fff;
    height: 84px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    // box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.205);
    .show-msg-item {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .msg-nums {
        font-size: 22px;
        font-family: Arial-BoldMT, Arial;
        font-weight: 600;
        color: #333333e1;
      }
      .msg-label {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666f1;
      }
      &.liner-before {
        &::before {
          content: "";
          width: 1px;
          height: 50%;
          position: absolute;
          top: 25%;
          left: 0;
          background-color: #eeeeee;
        }
      }
    }
    .show-msg-liner {
      height: 80%;
      top: 10%;
    }
  }
}
</style>
